<template>
  <Transition
    enter-active-class="transform ease-out duration-normal transition"
    enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
    enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
    leave-active-class="transition ease-in duration-normal"
    leave-from-class="opacity-100"
    leave-to-class="opacity-0"
  >
    <div
      v-if="isVisible"
      :class="toastClasses"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
    >
      <div class="flex items-start p-3">
        <!-- 图标 -->
        <div class="flex-shrink-0 mr-3">
          <!-- 成功图标 -->
          <svg v-if="type === 'success'" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" :class="iconClasses">
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.236 4.53L7.53 10.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
              clip-rule="evenodd"
            />
          </svg>
          
          <!-- 错误图标 -->
          <svg v-else-if="type === 'error'" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" :class="iconClasses">
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
              clip-rule="evenodd"
            />
          </svg>
          
          <!-- 警告图标 -->
          <svg v-else-if="type === 'warning'" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" :class="iconClasses">
            <path
              fill-rule="evenodd"
              d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
              clip-rule="evenodd"
            />
          </svg>
          
          <!-- 信息图标 -->
          <svg v-else viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" :class="iconClasses">
            <path
              fill-rule="evenodd"
              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h1.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
              clip-rule="evenodd"
            />
          </svg>
        </div>

        <!-- 内容 -->
        <div class="w-0 flex-1">
          <p :class="messageClasses">
            {{ message }}
          </p>
          <p v-if="description" :class="descriptionClasses">
            {{ description }}
          </p>
        </div>

        <!-- 关闭按钮 -->
        <div class="ml-3 flex flex-shrink-0">
          <button 
            type="button" 
            :class="closeButtonClasses" 
            @click="handleClose" 
            aria-label="关闭"
          >
            <span class="sr-only">关闭</span>
            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path
                fill-rule="evenodd"
                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import { computed, ref, onMounted, onUnmounted } from 'vue'

  interface Props {
    id: string
    type?: 'success' | 'error' | 'warning' | 'info'
    message: string
    description?: string
    duration?: number
    closable?: boolean
    onClose?: (id: string) => void
  }

  const props = withDefaults(defineProps<Props>(), {
    type: 'info',
    duration: 5000,
    closable: true,
  })

  const emit = defineEmits<{
    close: [id: string]
  }>()

  const isVisible = ref(true)
  let timeoutId: number | undefined

  // 类型配置 - 使用项目的设计系统颜色
  const typeConfig = {
    success: {
      border: 'border-green-500/30',
      icon: 'text-green-400',
      text: 'text-text-primary',
      description: 'text-text-secondary',
    },
    error: {
      border: 'border-error/30',
      icon: 'text-error',
      text: 'text-text-primary',
      description: 'text-text-secondary',
    },
    warning: {
      border: 'border-yellow-500/30',
      icon: 'text-yellow-400',
      text: 'text-text-primary',
      description: 'text-text-secondary',
    },
    info: {
      border: 'border-primary-500/30',
      icon: 'text-primary-400',
      text: 'text-text-primary',
      description: 'text-text-secondary',
    },
  }

  // 计算属性
  const config = computed(() => typeConfig[props.type])
  const toastClasses = computed(() => [
    'max-w-sm w-full shadow-lg rounded-lg pointer-events-auto overflow-hidden glass-effect',
    config.value.border,
  ])

  const messageClasses = computed(() => ['text-sm font-medium leading-5', config.value.text])

  const descriptionClasses = computed(() => ['mt-1 text-sm leading-4', config.value.description])

  const iconClasses = computed(() => ['h-5 w-5', config.value.icon])

  const closeButtonClasses = computed(() => [
    'inline-flex p-1 rounded-md bg-background-700/30 text-text-secondary hover:text-text-primary hover:bg-background-600/50 focus:outline-none transition-colors duration-normal',
  ])



  // 方法
  const handleClose = () => {
    isVisible.value = false
    emit('close', props.id)
    if (props.onClose) {
      props.onClose(props.id)
    }
  }

  const startTimer = () => {
    if (props.duration > 0) {
      timeoutId = window.setTimeout(() => {
        handleClose()
      }, props.duration)
    }
  }

  // 生命周期
  onMounted(() => {
    startTimer()
  })

  onUnmounted(() => {
    if (timeoutId) {
      clearTimeout(timeoutId)
    }
  })
</script>
